<template>
  <view>
    <view class="margin-label">
      <view class="label-box">
        <view class="label-title">
          真实姓名<text
            :style="{
              color: '#FF4A01',
            }"
            >*</text
          >
        </view>
        <view class="label-content">
          <input
            class="label-input"
            type="text"
            placeholder="与证件姓名保持一致"
            v-model="name"
          />
        </view>
      </view>
    </view>
    <view class="margin-label">
      <view class="label-box">
        <view class="label-title active">
          证件类型<text
            :style="{
              color: '#FF4A01',
            }"
            >*</text
          >
        </view>
        <view class="label-content">
          <view class="label-btn" @click="add"
          :data-spmCntSuffix="'.labelBtn.add@'"
          :data-custom="1"
          :data-spm="{'pos': '添加证件'}">
            <picker
              @change="bindPickerChange"
              :value="index"
              :range="certificateList"
              range-key="label"
            >
              添加证件
            </picker>
          </view>
        </view>
      </view>
      <block v-if="addCarList.length > 0">
        <view class="label-box-2">
          <view class="box2-title">
            <img
              class="delete-icon"
              src="https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/ai-icon-5.png"
              @click="deleteCar(0)"
              :data-spmCntSuffix="'.deleteIcon.deleteCar@'"
              :data-custom="1"
              :data-spm="{'pos': 'deleteCar'}"
            />
            <view class="title-txt">{{ addCarList[0].label }}</view>
          </view>
          <view class="certificate-box">
            <view class="certificate-title"
              >证件号码<text
                :style="{
                  color: '#FF4A01',
                }"
                >*</text
              ></view
            >
            <input
              class="certificate-input"
              type="text"
              placeholder="请正确填写证件号"
              v-model="addCarList[0].value"
            />
          </view>
        </view>
      </block>
    </view>
    <block v-for="(item, index) in addCarList" :key="index">
      <view class="margin-label" v-if="index > 0">
        <view class="label-box-2 active">
          <view class="box2-title active">
            <img
              class="delete-icon"
              src="https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/ai-icon-5.png"
              @click="deleteCar(index)"
              :data-spmCntSuffix="'.deleteIcon.deleteCar@'"
              :data-custom="index"
              :data-spm="item"
            />
            <view class="title-txt">{{ item.label }}</view>
          </view>
          <view class="certificate-box">
            <view class="certificate-title"
              >证件号码<text
                :style="{
                  color: '#FF4A01',
                }"
                >*</text
              ></view
            >
            <input
              class="certificate-input"
              type="text"
              placeholder="请正确填写证件号"
              v-model="item.value"
            />
          </view>
        </view>
      </view>
    </block>
    <view class="margin-label">
      <view class="label-box">
        <view class="label-title">
          手机号码<text
            :style="{
              color: '#FF4A01',
            }"
            >*</text
          >
        </view>
        <view class="label-content">
          <input
            class="label-input"
            type="text"
            placeholder="用于接收通知消息"
            v-model="phone"
          />
        </view>
      </view>
    </view>
    <view class="remark-box">
      <view class="box-1" @click="agreeBtn"
      :data-spmCntSuffix="'.remarkBox.agreeBtn@'"
      :data-custom="1"
      :data-spm="{'pos': '阅读并同意以下内容'}">
        <view>
          <img
            class="remark-icon"
            :src="
              agree
                ? 'https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-09-14/icon_checked.png'
                : 'https://vtrip-sfile.oss-cn-shenzhen.aliyuncs.com/h5AndMini/2023-6-12/ai-icon-2.png'
            "
            alt=""
            srcset=""
          />
        </view>
        <view class="remark-txt-1">阅读并同意以下内容</view>
      </view>
      <view class="remark-txt"
        >您已知晓您在视旅录入的出行人身份证件信息，将用于您购
        买的旅游服务等所有需要实名制的旅游产品，并在使用时进
        行验证，请确保此信息的真实有效。视旅将通过加密等方式
        保护此信息，且仅在有具体交易时授权提供给相关第三方。</view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addCertificate: false,
      agree: false,
      certificateList: [
        {
          label: "身份证",
          value: "",
        },
        {
          label: "护照",
          value: "",
        },
        {
          label: "港澳通行证",
          value: "",
        },
        {
          label: "港澳居民居住证",
          value: "",
        },
        {
          label: "港澳往返内地通行证",
          value: "4",
        },
        {
          label: "军官证",
          value: "",
        },
        {
          label: "警官证",
          value: "",
        },
        {
          label: "士官证",
          value: "7",
        },
        {
          label: "台湾通行证",
          value: "",
        },
        {
          label: "台湾居民居住证",
          value: "",
        },
        {
          label: "台湾往返内地通行证",
          value: "",
        },
        {
          label: "户口簿",
          value: "11",
        },
        {
          label: "出生证明",
          value: "",
        },
        {
          label: "入台证",
          value: "",
        },
        {
          label: "外国人永久居留身份证",
          value: "",
        },
        {
          label: "国际海员",
          value: "15",
        },
        {
          label: "中国驾照",
          value: "",
        },
        {
          label: "其他证件",
          value: "",
        },
      ],
      addCarList: [],
      name: "",
      phone: "",
    };
  },
  methods: {
    add() {
      this.addCertificate = true;
    },
    //点击同意内容
    agreeBtn() {
      this.agree = !this.agree;
    },
    bindPickerChange(e) {
      let choseItem = this.certificateList[e.detail.value];
      let arr = this.addCarList;
      if (arr.includes(choseItem)) {
        console.log("Object exists in the array");
      } else {
        this.addCarList.push(choseItem);
      }
    },
    deleteCar(index) {
      let choseItem = this.addCarList[index];
      console.log("choseItem", choseItem);
      this.addCarList = this.addCarList.filter(
        (item) => item.label != choseItem.label
      );
    },
    async onSave() {
      let reg = /^[\u4e00-\u9fa5()\.·•]+$/;
      let reg2 = /^[\a-zA-Z\.·•]+$/;
      if (!reg.test(this.name)) {
        uni.showToast({
          title: "请输入正确的真实姓名",
          icon: "none",
          duration: 3000,
        });
        return;
      }
      console.log("this.addCarList", this.addCarList);
      if (this.addCarList.length < 1) {
        uni.showToast({
          title: "请添加证件",
          icon: "none",
          duration: 3000,
        });
        return;
      } else {
        for (var i = 0; i < this.addCarList.length; i++) {
          if (!this.addCarList[i].value) {
            uni.showToast({
              title: "请输入正确证件号",
              icon: "none",
              duration: 3000,
            });
            return;
          }
        }
      }

      if (this.phone.length != 11) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
          duration: 3000,
        });
        return;
      }
      if (!this.agree) {
        uni.showToast({
          title: "请阅读并同意条款",
          icon: "none",
          duration: 3000,
        });
        return;
      }
      let certificateRequestList = [];
      for (var i = 0; i < this.addCarList.length; i++) {
        certificateRequestList.push({
          cardType: this.addCarList[i].label,
          cardNum: this.addCarList[i].value,
          cardValidity: "",
        });
      }

      let formState = {
        realName: this.name,
        enName: "",
        sex: "",
        phone: this.phone,
        certificateRequestList,
      };
      let res = await this.$aiRequest({
        url: "/app/my/contacts/appCreate",
        method: "POST",
        params: formState,
      });
      console.log("添加出行人·················", res);
      if(res.success){
        uni.showToast({
          title:'添加成功~',
          icon:'none'
        })
        this.$emit('addTripClick',false)
      }
    },
  },
};
</script>

<style scoped lang="scss">
.margin-label {
  width: 710rpx;
  min-height: 108rpx;
  background: #ffffff;
  border-radius: 30rpx;
  margin: 10rpx auto;
}
.label-box {
  display: flex;
  align-items: center;
  height: 108rpx;
  .label-title {
    color: #4d566a;
    font-size: 28rpx;
    width: 200rpx;
    padding-left: 30rpx;
  }
  .label-title.active {
    color: $sl-color-grey;
  }
  .label-content {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .label-input {
      width: 100%;
      height: 108rpx;
      line-height: 10r8rpx;
    }
    .label-btn {
      width: 200rpx;
      height: 60rpx;
      border-radius: 30rpx;
      background: $sl-color-light-blue;
      color: #ffffff;
      font-size: 24rpx;
      text-align: center;
      line-height: 60rpx;
      margin-right: 30rpx;
    }
  }
}
.label-box-2 {
  width: 650rpx;
  min-height: 97rpx;
  margin: 0 auto;
  .box2-title {
    display: flex;
    align-items: center;
    height: 97rpx;
    border-top: 1rpx solid #e5e5e5;
    display: flex;
    .delete-icon {
      width: 33rpx;
      height: 33rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 33rpx;
      color: #fff;
      margin-right: 18rpx;
    }
    .title-txt {
      color: $sl-color-grey;
      font-weight: 600;
      font-size: 28rpx;
    }
  }
  .box2-title.active {
    border: none;
  }
  .certificate-box {
    display: flex;
    align-items: center;
    height: 97rpx;
    border-top: 1rpx solid #e5e5e5;
    width: 600rpx;
    margin-left: auto;
    .certificate-title {
      color: $sl-color-grey;
      font-size: 28rpx;
      text-align: right;
      width: 165rpx;
      padding-right: 30rpx;
    }
    .certificate-input {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}
.remark-box {
  width: 710rpx;
  margin: 0 auto;
  padding: 0 30rpx 20rpx 30rpx;
  .box-1 {
    display: flex;
    align-items: center;
    padding: 48rpx 0 20rpx 0;
    .remark-icon {
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
    .remark-txt-1 {
      font-size: 28rpx;
      color: #4d566a;
    }
  }
  .remark-txt {
    font-size: 24rpx;
    color: #999999;
  }
}
</style>